<template>
  <view>
    <view  class="goods-item">
        <view class="goods-item-left">
          <radio :checked="item.goods_state" color="#c00000" v-if="showRadio" @click="radioClickHandler"></radio>
          <image :src="item.goods_small_logo || defalutPic" class="goods-pic"></image>
        </view>
        <view class="goods-item-right">
          <view class="goods-name">
            {{item.goods_name}}
          </view>
          <view class="goods-info-box">
            <view class="goods-price">
              ￥{{item.goods_price | tofixed}}
            </view>
            <uni-number-box :min="1" :value="item.goods_count" v-if="showNum" @change="numChangeHandle"></uni-number-box>
          </view>
        </view>
      </view>
    
  </view>
</template>

<script>
  export default {
    name:"my-goods",
    props:{
      item:{
        type:Object,
        default:{}
      },
      showRadio:{
        type:Boolean,
        default:false
      },
      showNum:{
        type:Boolean,
        defalut:false
      }
    },
    data() {
      return {
        defalutPic:'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000133089241_2_200x200.jpg'
      };
    },
    filters:{
      tofixed(num){
        return Number(num).toFixed(2)
      }
    },
    methods:{
      radioClickHandler(){
        
        this.$emit('radio-change',{
          goods_id: this.item.goods_id,
          goods_state: !this.item.goods_state,
          })
      },
      numChangeHandle(val){
        this.$emit('num-change',{
          goods_id: this.item.goods_id,
          goods_count:val
        })
      }
    }
  
  }
</script>

<style lang="scss">
  .goods-item{
      display: flex;
      padding: 10px 5px;
      border-bottom: 1px solid #f0f0f0;
      .goods-item-left{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 5px;
        .goods-pic{
          display: block;
          width: 100px;
          height: 100px;         
        }
      }
      .goods-item-right{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .goods-name{
          font-size: 13px
        }
        .goods-info-box{
          display: flex;
          justify-content: space-between;
          width: 100%;
          .goods-price{
          font-size: 16px;
          color: #c00000;
          }
        }
        
      }
    }
  
</style>